<template>
  <view class="nav-box u-flex-y-center" :style="{'padding-top':navHeight+'px'}">
    <u-image src="/static/images/mv_tuichu.png" width="20rpx" height="34rpx" :fade="false"
      @click="handleBack"></u-image>
    <view class="u-flex-y-center u-m-l-32" @click="changeCity">
      <up-text :text="data.city" color="#000" size="14"></up-text>
      <u-icon name="arrow-down-fill" size="13" color="#000"> </u-icon>
    </view>
    <view class="nav-search u-flex-y-center u-flex-fill" @click="handleSearch">
      <image src="/static/images/01_1erss.png"></image>
      <input type="text" placeholder="请输入关键字搜索" v-model="params.keyword" @blur="handleSearch" />
    </view>
  </view>
  <view class="u-p-l-20 u-p-r-20 u-p-t-16">
    <up-swiper :list="data.list" key-name="image"></up-swiper>
    <view class="u-flex-y-center u-m-t-28 u-m-b-10">
      <view :class="data.current== 2?'active':'inactive'" @click="changeHouse(2)">
        <text>二手房</text>
        <view class="active-bar" v-if="data.current == 2"></view>
      </view>
      <view class="u-m-l-56 " :class="data.current== 1?'active':'inactive'" @click="changeHouse(1)">
        <text>新房</text>
        <view class="active-bar" v-if="data.current == 1"></view>
      </view>
    </view>
    <u-dropdown ref="uDropdownRef">
      <u-dropdown-item title="按区域" v-model="params.district_id" label="name" :options="data.cityList"
        @change="handleChange" height="500rpx"> </u-dropdown-item>
      <u-dropdown-item v-model="params.price_id" title="按价格" label="name" :options="data.price"
        @change="handleChange"></u-dropdown-item>
      <u-dropdown-item v-model="params.house_type" title="按户型" label="name" @change="handleChange"
        :options="data.house_type"></u-dropdown-item>
      <u-dropdown-item v-model="params.space_id" title="按面积" label="name" :options="data.space"
        @change="handleChange"></u-dropdown-item>
    </u-dropdown>
    <block v-for="(item,index) in data.houseList" :key="item.id">
      <house-item customStyle="background:#fff" :item="item" :imageWidth="234" imageHeight="192">
        <template #right>
          <view class="u-flex-between u-flex-column u-flex-fill">
            <view class="house-name u-flex-y-center">
              <view class="house-tag" v-if="item.label">{{item.label}}</view>
              <view class="u-line-1 u-flex-1">{{item.title}}</view>
            </view>
            <view class="house-desc">“{{item.description}}”</view>
            <view class="house-info">“{{item.space}}㎡ |{{item.house_type_text}}”</view>
            <view class="house-price u-flex-y-center u-flex-between">
              <text>市场价：{{item.market_price}}万</text>
              <text>优惠价：{{item.price}}万</text>
            </view>
          </view>
        </template>
      </house-item>
    </block>
    <u-empty v-if="!data.houseList.length"></u-empty>
  </view>
  <back-page></back-page>
</template>

<script setup>
  import { computed, nextTick, onMounted, ref } from 'vue'
  import { houseList, houseOption, region, swiper } from '@/config/api';
  import { config } from '@/common/config';
  import { getCache } from '../../../util/util';
  import { onShow } from '@dcloudio/uni-app'
  const props = defineProps({
    type: {
      type: [String, Number],
      default: ''
    },
    keyword: {
      type: [String],
      default: ''
    }
  })
  const navHeight = computed(() => uni.getSystemInfoSync().statusBarHeight + 10)
  const uDropdownRef = ref(null)
  const data = ref({
    list: [],
    current: 2,
    house_type: [],
    price: [],
    space: [],
    cityList: [],
    houseList: [],
    regionShow: false,
    city: getCache('city'),
    city_id: getCache('city_id')
  })
  const params = ref({
    price_id: '',
    space_id: '',
    house_type: '',
    province_id: '',
    city_id: '',
    district_id: '',
    page: 1,
    limit: 15,
    keyword: ''
  })
  if (props.keyword) params.value.keyword = props.keyword
  if (props.type) data.value.current = props.type
  onMounted(() => {
    _swiper()
    _houseList()
    _houseOption()
  })
  onShow(() => {
    data.value.city = getCache('city')
    data.value.city_id = getCache('city_id')
    _region()
  })
  const handleSearch = () => {
    params.value.page = 1
    _houseList()
  }
  // 获取省市区
  const _region = () => {
    region({ pid: data.value.city_id }).then(res => {
      data.value.cityList = res.data.map(item => {
        item.value = item.id
        return item
      })
    })
  }
  // 筛选
  const handleChange = (e) => {
    console.log(params.value, e)
    params.value.page = 1
    _houseList()
  }
  // 省市区选择
  const confirmRegion = (row) => {
    params.value = {
      ...params.value,
      ...row
    }
    _houseList()
    uDropdownRef.value.close()
  }
  const closeRegion = () => {
    uDropdownRef.value.close()
  }
  const initParams = () => {
    params.value = {
      price_id: '',
      space_id: '',
      house_type: '',
      province_id: '',
      city_id: '',
      district_id: '',
      page: 1,
      limit: 15,
      keyword: params.value.keyword
    }
    data.value.regionShow = true
    nextTick(() => {
      data.value.regionShow = false
    })
  }
  // tbs切换
  const changeHouse = (e) => {
    data.value.current = e
    initParams()
    _houseList()
  }
  // 选择省市区
  const changeCity = () => {
    uni.$u.route('/pages/index/changeCity')
  }
  // 房源筛选选项列表
  const _houseOption = () => {
    houseOption().then(res => {
      data.value = {
        ...data.value,
        ...res.data
      }
    })
  }
  // 房源列表
  const _houseList = () => {
    houseList({
      ...params.value,
      type: data.value.current
    }).then(res => {
      data.value.houseList = res.data.data
    })
  }
  // 轮播图
  const _swiper = () => swiper({
    type: 22
  }).then(res => {
    data.value.list = res.data.map(item => {
      if (item.image.indexOf('http') == -1) item.image = `${config.staticURL}${item.image}`
      return item
    })
  })
  const handleBack = () => {
    uni.navigateBack()
  }
</script>

<style scoped lang="scss">
  .nav-box {
    height: 204rpx;
    padding: 0 20rpx;
    background: #fff;


    .nav-icon {
      width: 24rpx;
      height: 24rpx;
      margin-left: 10rpx;
    }

    .nav-search {
      background: #F6F6F6;
      height: 76rpx;
      border-radius: 38rpx;
      margin-left: 20rpx;
      padding: 0 24rpx;
      font-size: 26rpx;

      image {
        width: 36rpx;
        margin-right: 16rpx;
        height: 36rpx;
      }

      text {
        margin-left: 16rpx;
      }
    }
  }

  .active {
    position: relative;
    color: #e47117;
    font-size: 32rpx;
    font-weight: 800;

  }

  .inactive {
    font-size: 28rpx;
    font-weight: 500;
    color: #000;
  }

  .active-bar {
    position: absolute;
    bottom: -15rpx;
    left: 0;
    right: 0;
    margin: auto;
    width: 26rpx;
    height: 10rpx;
    background: #F87610;
    border-radius: 6rpx;
  }

  .house-name {
    font-size: 24rpx;
    color: #333;
    font-weight: 600;

    .house-tag {
      width: 112rpx;
      height: 36rpx;
      background: linear-gradient(180deg, #7E7872 0%, #4E4E4E 100%);
      border-radius: 8rpx;
      text-align: center;
      line-height: 36rpx;
      color: #fff;
      font-size: 20rpx;
      font-weight: 500;
      margin-right: 12rpx;

    }
  }

  .house-info {
    font-size: 24rpx;
    font-weight: 500;
    color: #666;
  }

  .house-desc {
    font-size: 22rpx;
    color: #E47117;
  }

  .house-price {
    color: #DF0F0F;
    font-weight: 800;
    font-size: 24rpx;
  }
</style>